<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import { queryStoreProductDetail } from '@/api/term'
import { queryStoreProductDetailResponseData } from '@/api/term/types/term'
import { getToken } from '@/utils/cache/cookies'
const dialogVisible = ref<boolean>(false)
const storeId = ref<string>('')
const name = ref<string>('')
const previousStoreId = ref<string | null>(null)
const previousName = ref<string | null>(null)
const open = async () => {
  if (storeId.value !== previousStoreId.value || name.value !== previousName.value) {
    previousStoreId.value = storeId.value
    previousName.value = name.value
    await getData()
  }
  dialogVisible.value = true
}
const setData = (newId: string, newName: string) => {
  storeId.value = newId
  name.value = newName
}
defineExpose({ open, setData })
const data = ref<queryStoreProductDetailResponseData | null>(null)
const getData = async () => {
  try {
    const res = await queryStoreProductDetail({
      token: getToken() ?? '',
      storeId: storeId.value,
      name: name.value
    })
    if (res.statusCode === '0') {
      data.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}
const BatterySizePopover = defineAsyncComponent(
  () => import('@/components/popover/BatterySizeInfo.vue')
)
</script>

<template>
  <el-dialog
    title="更多信息"
    v-model="dialogVisible"
    width="810px"
    class="bike-rent-term-info_dialog"
  >
    <div class="image-info" flex flex-col>
      <span class="image-info__title">车辆信息</span>
      <div flex mt-10>
        <el-image
          v-for="(img, index) in data?.images.split(',')"
          style="width: 185px; height: 105px; margin-right: 10px"
          :key="index"
          :src="img"
          lazy
          :preview-src-list="data?.images.split(',')"
          :preview-teleported="true"
          :initial-index="index"
          fit="contain"
        />
      </div>
    </div>
    <div class="bike-info" flex flex-col v-if="JSON.stringify(data?.productParas) !== '{}'">
      <span class="bike-info__title">车辆参数</span>
      <div class="bike-info__container">
        <div class="bike-info__item" v-for="(value, key, index) in data?.productParas" :key="index">
          <div>{{ key }}</div>
          <div>{{ value }}</div>
        </div>
        <div class="bike-info__item">
          <div>电池尺寸</div>
          <div>
            <el-popover trigger="hover" popper-class="battery-size_popover" width="auto">
              <battery-size-popover :data="data?.batterySize ?? []" />
              <template #reference>
                <el-button link type="primary" class="is-open"> 查看 </el-button>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="rent-time-info" flex flex-col mt-10>
      <span class="rent-time-info__title">可租周期</span>
      <el-table :data="data?.rentTime" border mt-10 header-cell-class-name="rent-time-info__header">
        <el-table-column label="周期" prop="rentTime" align="center" />
        <el-table-column label="租金/售价" prop="price" align="center" />
        <el-table-column label="押金" prop="deposit" align="center" />
        <el-table-column label="免押配置" prop="depositType" align="center" />
        <el-table-column label="逾期费" prop="overdueAmount" align="center" />
        <el-table-column label="先用后付" prop="payAfterUse" align="center" />
        <el-table-column label="优惠券抵扣" prop="canUseCoupon" align="center" />
        <el-table-column label="租赁权益" prop="rentEquity" align="center" show-overflow-tooltip />
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped></style>
